<template>
  <div class="main">
    <a-steps :current="current">
      <a-step title="填写销售申请信息"></a-step>
      <a-step title="确认配送信息"/>
      <a-step title="完成申请"/>
    </a-steps>
    <div class="steps-content">
      <div v-if="current === 0">
        <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-model-item label="选择司机" required>
            <a-select v-model="selectDriverIndex" placeholder="请选择配送司机">
              <a-select-option :value="index" v-for="(item, index) in drivers" :key="index" :disabled="item.driving||item.score==0">
                {{ item.name }}
                <i class="dis" v-if="item.driving">
                  <a-icon type="close-circle"/>
                  正在途中</i>

                <i class="dis" v-if="item.score==0">
                  <a-icon type="close-circle"/>
                  分数不足</i>
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="选择销售单" required>
            <a-select v-model="selectSaleIndex" placeholder="请选择销售单">
              <a-select-option :value="index" v-for="(item, index) in sales" :key="index">
                公司：{{ item.name }} -> 产品：{{ item.commodity }} -> 数量：{{ item.count }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="选择配送仓库" required>
            <a-select v-model="selectWareHouseIndex" placeholder="请选择仓库">
              <a-select-option :value="index" v-for="(item, index) in warehouses" :key="index">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="选择运输车辆" required>
            <a-select v-model="selectVehicleIndex" placeholder="请选择配送车辆">
              <a-select-option :value="index" v-for="(item, index) in vehicles" :key="index" :disabled="item.driving">
                {{ item.type }} : {{ item.number }}
                <i class="dis" v-if="item.driving">
                  <a-icon type="close-circle"/>
                  正在途中</i>
              </a-select-option>
            </a-select>

          </a-form-model-item>
          <a-form-model-item label="预计交货时间" required>
            <a-date-picker
                v-model="form.time"
                show-time
                type="date"
                placeholder="选择日期"
                style="width: 100%;"
            />
          </a-form-model-item>
          <a-form-model-item label="加急处理">
            <a-switch v-model="form.urgent"/>
          </a-form-model-item>
          <a-form-model-item label="注意事项">
            <a-checkbox-group v-model="form.cares">
              <a-checkbox value="冰柜冷藏" name="type">
                冰柜冷藏
              </a-checkbox>
              <a-checkbox value="注意易碎" name="type">
                注意易碎
              </a-checkbox>
              <a-checkbox value="防止高温" name="type">
                防止高温
              </a-checkbox>
            </a-checkbox-group>
          </a-form-model-item>
          <a-form-model-item :wrapper-col="{ span: 14, offset: 6 }">
            <a-button type="primary" @click="next">
              下一步
            </a-button>
          </a-form-model-item>
        </a-form-model>
      </div>
      <div v-if="current === 1" class="check">
        <p>送货司机： {{ form.driver }}</p>
        <p>车牌号码： {{ form.number }}</p>
        <p>加急处理： {{ form.urgent }}</p>
        <p>注意事项： {{ form.care }}</p>
        <p>客户电话： {{ form.phone }}</p>
        <p>客户地址： {{ form.address }}</p>
        <p>预计送达： {{ form.time }}</p>
        <a-button type="danger" style="margin-right: 20px" :loading="loading" @click="submit">提交</a-button>
        <a-button @click="current = 0">上一步</a-button>
      </div>
      <div v-if="current === 2">
        <a-result
            status="success"
            title="提交成功"
            sub-title="请等待管理员的确认"
        >
          <template #extra>
            <router-link to="/delivery/list">
              <a-button key="console" type="primary">
                回到控制台
              </a-button>
            </router-link>
            <a-button key="buy" @click="current = 0">
              继续提交
            </a-button>
          </template>
        </a-result>
      </div>
    </div>
  </div>
</template>

<script>
import {FindAllCanUse, SaveDistribution} from "../../api/distribution";
import {FindAllWarehouse} from "@/api/warehouse";
import {FindAllSale} from "@/api/sale";
import {FindAllCommodity} from "@/api/commodity";
import {FindAllInventory, InAndOut} from "../../api/inventory";

export default {

  data() {
    return {
      loading: false,
      labelCol: {span: 6},
      wrapperCol: {span: 12},
      current: 0,
      selectDriverIndex: 0,
      selectVehicleIndex: 0,
      selectSaleIndex:0,
      selectWareHouseIndex:0,
      drivers: [],
      vehicles: [],
      warehouses: [],
      commoditys:[],
      sales:[],
      form: {
        id: '',
        did: '',
        vid: '',
        cid:'',
        wid:'',
        count:0,
        driver: '',
        number: '',
        phone: '',
        address: '',
        urgent: false,
        cares: [],
        care: '',
        time: '',
        status: 0,
      },
    }
  },

  async created() {
    await FindAllCommodity().then((res) => {
      if (res.status) {
        this.commoditys = res.data
      }
    })
    await FindAllSale().then((res) => {
      if (res.status) {
        this.sales = []
        res.data.forEach((item) => {
          if(item.pay == 0){
            this.sales.push(item)
          }
        })
      }
    })

    await FindAllWarehouse().then((res) => {
      if (res.status) {
        this.warehouses = res.data
      }
    })
    await FindAllInventory(this.warehouses[this.selectWareHouseIndex].id).then((res) => {
      if (res.status) {
        this.commoditys = res.data
      }
    })
  },

  watch:{
    selectSaleIndex(){
      this.form.phone = this.sales[this.selectSaleIndex].phone
      this.form.address = this.sales[this.selectSaleIndex].address
      this.form.count = this.sales[this.selectSaleIndex].count
    },
    selectWareHouseIndex:function (val) {
      FindAllInventory(this.warehouses[val].id).then((res) => {
        if (res.status) {
          this.commoditys = res.data
        }
      })
    }
  },

  mounted() {
    FindAllCanUse().then((res) => {
      if (res.status) {
        this.drivers = res.data.drivers
        this.vehicles = res.data.vehicles
      }
      console.log(this.drivers)
      console.log(this.vehicles)
    })
    FindAllWarehouse().then((res) => {
      if (res.status) {
        this.warehouses = res.data
      }
    })
    FindAllSale().then((res) => {
      this.sales = []
      res.data.forEach((item) => {
        if(item.pay == 0){
          this.sales.push(item)
        }
      })
    })
    FindAllInventory(this.warehouses[val].id).then((res) => {
      if (res.status) {
        this.commoditys = res.data
      }
    })
  },

  methods: {
    next() {
      let bHaving = false
      let bEnough = false
      for(var i = 0; i < this.commoditys.length; i++){
        if(this.commoditys[i].cid === this.sales[this.selectSaleIndex].cid){
          bHaving = true
          if(this.commoditys[i].count >= this.sales[this.selectSaleIndex].count){
            bEnough = true
          }
        }
      }
      if(!bHaving){
        this.$message.error('仓库中没有该商品')
        return
      }
      if(!bEnough){
        this.$message.error('仓库中该商品数量不足')
        return
      }
      let care = ''
      for (let i = 0; i < this.form.cares.length; i++) {
        care += this.form.cares[i] + ", "
      }
      this.form.phone = this.sales[this.selectSaleIndex].phone
      this.form.address = this.sales[this.selectSaleIndex].address
      this.form.driver = this.drivers[this.selectDriverIndex].name
      this.form.did = this.drivers[this.selectDriverIndex].id
      this.form.number = this.vehicles[this.selectVehicleIndex].number
      this.form.vid = this.vehicles[this.selectVehicleIndex].id
      this.form.cid = this.sales[this.selectSaleIndex].cid
      this.form.wid = this.warehouses[this.selectWareHouseIndex].id
      this.form.sid = this.sales[this.selectSaleIndex].id

      this.form.count = this.sales[this.selectSaleIndex].count
      this.form.care = care
      this.current = 1
    },
    submit() {
      this.loading = true
      SaveDistribution(this.form).then((res) => {
        if (res.status) {
          setTimeout(() => {
            this.loading = false
            this.current = 2
            this.$message.success("提交成功，请等待审核")
          }, 800)
        } else {
          setTimeout(() => {
            this.loading = false
            this.$message.error("提交失败")
          }, 800)
        }
      })
    },
  },

}
</script>

<style scoped>
.main {
  padding: 50px 180px;
  background: #ffffff;
}

.steps-content {
  margin-top: 40px;
}

.check {
  padding-left: 200px;
}

.check p {
  padding-bottom: 10px;
}

.dis {
  padding-left: 10px;
  font-size: 10px;
  letter-spacing: 1px;
  color: red;
}

</style>
